import React, {FC} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  GestureResponderEvent,
} from 'react-native';
import icon_group from '../../../assets/icon_group.png';
type PropsType = {
  show: (pageY: number) => void;
};
const Title: FC<PropsType> = (props: PropsType) => {
  const {show} = props;
  return (
    <View style={styles.titleLayout}>
      <Text style={styles.titleTxt}>消息</Text>
      <TouchableOpacity
        style={styles.groupLayout}
        onPress={(event: GestureResponderEvent) => {
          const {pageY} = event.nativeEvent;
          console.log('pageY', pageY);
          //show(pageY + 50);
          show(80); //最好能计算出view的高度
        }}>
        <Image source={icon_group} style={styles.groupImg} />
        <Text style={styles.groupTxt}>群聊</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  titleLayout: {
    width: '100%',
    height: 48,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleTxt: {
    fontSize: 18,
    color: '#333',
    fontWeight: 'bold',
  },
  groupLayout: {
    height: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    position: 'absolute',
    right: 16,
  },
  groupImg: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
  },
  groupTxt: {
    fontSize: 14,
    color: '#333',
    marginStart: 4,
  },
});
export default Title;
